<template>
	<view class="content">
	  <view class="img">
	  </view>
	  <view class="obtain">
		  <image src="../../static/img/obtain.png"></image>
	  </view>
	  <view class="obtainRule"> - 获得规则 -</view>
	 <view class="rule">
		  <p>1.每天首次分享获得1玫瑰.</p>
		  <p>2.邀请好友注册获得3天vip和5玫瑰.</p>
		  <p>3.好友完成手机认证获取一张相亲卡.</p>
	  </view>
	  <view class="inviteBtn" @tap="showPopup">立即邀请</view>
	 <van-popup :show="show" position="bottom" custom-style="height: 20%;" 
		  @click-overlay="onClose()"
	  >
		<view class="animate">
			<image src="../../static/img/share_weixin.png" @click="shareFriend"></image>
			<image src="../../static/img/share_weixin_timeline.png" @click="shareFriendCircle"></image>
		</view>
	  </van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			  show: false,
			}
		},
		onLoad() {
			
		},
		methods: {
			showPopup() {
			   this.show=true;
			  },
			  onClose() {
				this.show=false;
			  },
			  shareFriend(){
				  uni.share({
				      provider: "weixin",
				      scene: "WXSceneSession",
				      type: 0,
				      href: "http://uniapp.dcloud.io/",
				      title: "uni-app分享",
				      summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				      imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
				      success: function (res) {
				          console.log("success:" + JSON.stringify(res));
				      },
				      fail: function (err) {
				          console.log("fail:" + JSON.stringify(err));
				      }
				  });
			  },
			  shareFriendCircle(){
				  uni.share({
				      provider: "weixin",
				      scene: "WXSenceTimeline",
				      type: 0,
				      href: "http://uniapp.dcloud.io/",
				      title: "uni-app分享",
				      summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				      imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
				      success: function (res) {
				          console.log("success:" + JSON.stringify(res));
				      },
				      fail: function (err) {
				          console.log("fail:" + JSON.stringify(err));
				      }
				  });
			  }
		},
		
	}
</script>

<style lang="less" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.img{
		background-image: url(../../static/img/invite.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		position: absolute;
		top:0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.obtain{
		width: 100%;
		text-align: center;
		margin-top:682rpx;
		z-index: 9;
		image{
			width: 336rpx;
			height:80rpx ;
		}
	}
	.obtainRule{
		font-size: 36rpx;
		color:#fff;
		z-index: 10;
		margin-top: -73rpx;
	}
	.rule{
		width:550rpx;
		height:360rpx;
		background:rgba(255,255,255,1);
		border-radius:20rpx;
		z-index: 5;
		margin-top:-25rpx;
		padding: 90rpx 40rpx 65rpx 50rpx;
		box-sizing: border-box;
		p{
			padding: 10rpx;
			font-size: 28rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:#333333;
		}
		
	}
	.inviteBtn{
		background-color: #ED2C61;
		color:#fff;
		font-size: 30rpx;
		text-align: center;
		z-index: 5;
		width:550rpx;
		height:90rpx;
		line-height: 90rpx;
		box-shadow:0px 3rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius:45rpx;
		margin-top:35rpx;
	}
	.animate{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		image{
			width: 100rpx;
			height: 100rpx;
		}
	}	
</style>
